<html>
<meta charset="utf-8">
<title>书签</title>
<script type="text/javascript" src='../js/main.js'></script>
</head>

<body onload="loadmark()">
    <select id="templates" size=5 style='width:360px'>
        <!--这里ajax动态拉取。-->
    </select>
    <br />
    <br />
    <button type="button" onClick="insertMark()">插入</button>
</body>

</html>
<script>


    function loadmark() {
        var obj = document.getElementById("templates");
        let markList = wps.PluginStorage.getItem("MarkList")
        console.log(markList)
        resultJson = JSON.parse(markList);
        for (var i = 0; i < resultJson.length; i++) {
            var element = resultJson[i]
            var myOption = document.createElement("option"); //动态创建option标签
            myOption.value = element.Content;
            myOption.text = element.Content;
            obj.add(myOption);
        }
    }

    function insertMark() {
        var wpsApp = wps.WpsApplication();
        var obj = document.getElementById("templates");
        var index = obj.selectedIndex;
        if (index == -1) { //添加未选中数据时的异常处理
            alert("请先选择书签后再进行插入！");
            return;
        }
        var redId = obj.options[index].getAttribute("value");
        var doc = wpsApp.ActiveDocument;
        var selection = wpsApp.ActiveWindow.Selection;
        var range = selection.Range;
        var fields = doc.FormFields;
        fields.Shaded = false; // 显示底纹
        var formField = fields.Add(range, 70);//枚举值兼容性写法，70为枚举表中wps.Enum.wdFieldFormTextInput的值
        formField.Name = redId; // 书签名称设置
        formField.Result = redId; // 窗体域的显示结果设置
        //选中，主动触发刷新
        wps.WpsApplication().ActiveDocument.Range(selection.Start, selection.Start).Select()

    }

</script>